<template>
  <div class="bg">
    <div class="box">
      <el-alert v-show="showerror"
                title="内容不能为空"
                type="error"
                effect="dark"
                @close="close()"
                size="medium">
      </el-alert>
      <el-alert v-show="showEmailerror"
                title="验证码错误"
                type="error"
                effect="dark"
                @close="closeEmail()">
      </el-alert>
      <div>昵&nbsp;&nbsp;称：<el-input v-model="username" type="text"  placeholder="input username" class="input" ></el-input></div>
      <div>密&nbsp;&nbsp;码：<el-input v-model="password" type="text"  placeholder="input password" class="input"></el-input></div>
      <div>邮&nbsp;&nbsp;箱：<el-input v-model="email"  type="email"  placeholder="input email" class="input"></el-input></div>
      <div class="email">
        验证码：<el-input v-model="rEmail" type="text" class="inputEmail" placeholder="input Code"></el-input>
        <el-button type="primary" plain v-on:click="getCode()" class="btn">获取验证码</el-button>
      </div>
      <div><el-button type="success" v-on:click="registeruse()" class="btn">注册</el-button></div>
      <div><el-link type="danger" class="link" v-on:click="register()">已有账号，点击登录</el-link></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      username: '',
      password: '',
      email: '',
      rEmail: '',
      showerror: false,
      showEmailerror: false,
      requestEmail: ''
    }
  },
  methods: {
    getCode() {
      axios.get("http://localhost:8181//sentmail?email=" + this.email).then((t) => {
        this.requestEmail = t.request.response
        console.log(this.requestEmail);
      })
    },
    registeruse() {
      if(this.username == "" || this.password == "" || this.email == "" || this.rEmail == "") {
          this.showerror = true;
      } else {
        if (this.rEmail == this.requestEmail) {
          axios.get("http://localhost:8181//logon?name=" + this.username + "&password=" + this.password + "&email=" + this.email).then
          ((t) => {
            console.log(t)
          })
        } else {
          this.showEmailerror = true;
        }
      }
    },
    close() {
      this.showerror = false;
      console.log(this.showerror)
    },
    closeEmail() {
      this.showEmailerror = false;
    },
    register() {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .bg {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../assets/coolHue-FAD7A1-E96D71.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .box {
    position: absolute;
    top: 20%;
    /*bottom: 30%;*/
    left: 32%;
    right: 32%;
    padding: 10px 20px;
    /*right: 30%;*/
    /*border: 1px black solid;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background-color: white;
  }


  .el-input {
    width: 85%;
      margin-top: 15px;
      margin-bottom: 10px;
  }
  /*input .el-input__inner {*/
  /*  margin: 10px -10px 10px 5px;*/

  /*}*/

  .inputEmail {
    width: 50%;
    margin-right: 10px;
  }

  .el-button {
    /*width: 30%;*/
    /*height: 40px;*/
    text-align: center;
    margin-bottom: 10px;
  }

  .link{
    font-size: 20px;
  }

  .email {
    margin-bottom: 10px;
  }
</style>